<template>
  <div class="Orderwithdelivery">
    <div class="filter_container">
      <el-form :inline="true" :model="Orderwithdeliveryform" class="demo-form-inline">
        <el-form-item label="选择日期">
          <!-- <el-date-picker v-model="Orderwithdeliveryform.startTime" size="small" type="date" style='width: 150px;margin-right: 15px;'
            placeholder="选择开始日期" @change="startTime"></el-date-picker>
          <el-date-picker v-model="Orderwithdeliveryform.endTime" size="small" type="date" style='width: 150px;'
            placeholder="选择结束日期" @change="endTime"></el-date-picker> -->
          <el-date-picker size="small" v-model="Launchdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" icon="el-icon-download" @click="handleExport(Orderwithdeliveryform,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="OrderwithdeliveryList">
      <table>
        <thead>
          <tr>
            <th colspan="41"><span id="today1">{{this.Orderwithdeliveryform.startTime}}~{{this.Orderwithdeliveryform.endTime}}</span>全国下单和配送量时间节点累计量</th>
          </tr>
          <tr>
            <th rowspan="2">城市</th>
            <th rowspan="2" colspan='2'>区域</th>
            <th colspan="17">订单量（当天下单）</th>
            <th colspan="20">配送量</th>
          </tr>
          <tr id="time_flg">
            <th>8点</th>
            <th>9点</th>
            <th>10点</th>
            <th>11点</th>
            <th>12点</th>
            <th>13点</th>
            <th>14点</th>
            <th>15点</th>
            <th>16点</th>
            <th>17点</th>
            <th>18点</th>
            <th>19点</th>
            <th>20点</th>
            <th>21点</th>
            <th>22点</th>
            <th>23点</th>
            <th>订单量<br>总计</th>
            <th>8点</th>
            <th>9点</th>
            <th>10点</th>
            <th>11点</th>
            <th>12点</th>
            <th>13点</th>
            <th>14点</th>
            <th>15点</th>
            <th>16点</th>
            <th>17点</th>
            <th>18点</th>
            <th>19点</th>
            <th>20点</th>
            <th>21点</th>
            <th>22点</th>
            <th>23点</th>
            <th>配送量<br>总计</th>
            <th>今日<br>已签收</th>
            <th>今日<br>未签收</th>
          </tr>
        </thead>

        <tbody v-for="(item, index) in Reminderslist" :key='index'>
          <tr>
            <td class='remtr'>{{item.deptName}}</td>
            <td colspan='2' class='remtr'>
          <tr v-for="(child, index2) in item.areaList" :key='index2'>
            <td>{{child.mainWarehouse}}</td>
          </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td>{{child.orderEight}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderNine}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderEleven}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTwelve}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderThirteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderFourteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderFifteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderSixteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderSeventeen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderEighteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderNineteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTwenty}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTwentyOne}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTwentyTwo}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTwentyThree}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.orderTotal}}</td>
            </tr>
          </td>

          <!-- 配送 -->
          <td class='remtr'>
            <tr v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryEight}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryNine}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryEleven}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTwelve}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryThirteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryFourteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryFifteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliverySixteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliverySeventeen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryEighteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryNineteen}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTwenty}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTwentyOne}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTwentyTwo}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTwentyThree}}</td>
            </tr>
          </td>
          <!-- <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryFourteen}}</td>
            </tr>
          </td> -->
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.deliveryTotal}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.received}}</td>
            </tr>
          </td>
          <td class='remtr'>
            <tr style="border: none;" v-for="(child, index2) in item.areaList" :key='index2'>
              <td style="border: none;">{{child.notReceived}}</td>
            </tr>
          </td>
          </tr>
          <tr v-for="(total, index3) in item.totalList" :key='index3' class="total" style="border-bottom: 1px;">
            <td :colspan="3">{{total.total}}</td>
            <td>{{total.orderEight}}</td>
            <td>{{total.orderNine}}</td>
            <td>{{total.orderTen}}</td>
            <td>{{total.orderEleven}}</td>
            <td>{{total.orderTwelve}}</td>
            <td>{{total.orderThirteen}}</td>
            <td>{{total.orderFourteen}}</td>
            <td>{{total.orderFifteen}}</td>
            <td>{{total.orderSixteen}}</td>
            <td>{{total.orderSeventeen}}</td>
            <td>{{total.orderEighteen}}</td>
            <td>{{total.orderNineteen}}</td>
            <td>{{total.orderTwenty}}</td>
            <td>{{total.orderTwentyOne}}</td>
            <td>{{total.orderTwentyTwo}}</td>
            <td>{{total.orderTwentyThree}}</td>
            <td>{{total.orderTotal}}</td>
            <td>{{total.deliveryEight}}</td>
            <td>{{total.deliveryNine}}</td>
            <td>{{total.deliveryTen}}</td>
            <td>{{total.deliveryEleven}}</td>
            <td>{{total.deliveryTwelve}}</td>
            <td>{{total.deliveryThirteen}}</td>
            <td>{{total.deliveryFourteen}}</td>
            <td>{{total.deliveryFifteen}}</td>
            <td>{{total.deliverySixteen}}</td>
            <td>{{total.deliverySeventeen}}</td>
            <td>{{total.deliveryEighteen}}</td>
            <td>{{total.deliveryNineteen}}</td>
            <td>{{total.deliveryTwenty}}</td>
            <td>{{total.deliveryTwentyOne}}</td>
            <td>{{total.deliveryTwentyTwo}}</td>
            <td>{{total.deliveryTwentyThree}}</td>
            <td>{{total.deliveryTotal}}</td>
            <td>{{total.received}}</td>
            <td>{{total.notReceived}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import {
    getDeliveryExcelData
  } from "@/api/statistics";
  export default {
    data() {
      return {
        Orderwithdeliveryform: {
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(),
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD")
            .toString(),
        },
        //全国订单数据
        Reminderslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getDeliveryExcelData();
      window.addEventListener("keydown", this.keyupEnter);
    },
    methods: {
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
            this.handleFilter(this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      getDeliveryExcelData() {
        getDeliveryExcelData(this.Orderwithdeliveryform).then(res => {
          this.Reminderslist = res.data.data
        })
      },
      startTime(time) {
        if (time) {
          this.Orderwithdeliveryform.startTime = this.dayjs(
              time
            )
            .format("YYYY-MM-DD")
            .toString();
        } else {
          this.Orderwithdeliveryform.startTime = ''
        }

      },
      endTime(time) {
        if (time) {
          this.Orderwithdeliveryform.endTime = this.dayjs(
              time
            )
            .format("YYYY-MM-DD")
            .toString();
        } else {
          this.Orderwithdeliveryform.endTime = ''
        }

      },
      handleFilter(times) { //查询
        if (times) {
          this.Orderwithdeliveryform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Orderwithdeliveryform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Orderwithdeliveryform.startTime);
        var time2 = Date.parse(this.Orderwithdeliveryform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getDeliveryExcelData();
        }
      },
      handleExport(Orderwithdeliveryform, times) { //导出

        if (times) {
          this.Orderwithdeliveryform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Orderwithdeliveryform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Orderwithdeliveryform.startTime);
        var time2 = Date.parse(this.Orderwithdeliveryform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadDeliveryExcel?startTime=${this.Orderwithdeliveryform.startTime}&endTime=${this.Orderwithdeliveryform.endTime}&blade-auth=bearer ${user['content'].accessToken}`
          );
          console.log(
            `/api/xmbz-statistics/orderStatistics/downLoadDeliveryExcel?startTime=${this.Orderwithdeliveryform.startTime}&endTime=${this.Orderwithdeliveryform.endTime}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      }

    }

  }
</script>

<style lang='scss'>
  .Orderwithdelivery {
    padding-top: 20px;
    border-top: 1px solid #ccc;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }

    .OrderwithdeliveryList {
      .ordernum {}

      margin-bottom: 20px;

      table tr {
        border: none !important;
      }

      table tr.total {
        border: 1px solid #d7caba !important;
      }

      table tr.total td {
        border: 1px solid #d7caba !important;
      }

      table tr td {
        padding: 0 !important;
        border: none !important;
      }

      table {
        width: 100%;
        border: 1px solid #d7caba;
        border-collapse: collapse;
        font-size: 14px;
        color: #333;

        th {
          border: 1px solid #d7caba;
          background: #f4f0ea;
          height: 30px;
        }

        .total {
          border: 1px solid #d7caba;

          tr,
          td {
            border: 1px solid #d7caba;
            height: 35px;
            text-align: center;
          }

        }

        .remtr {
          border: none;
          border-bottom: 1px solid #d7caba !important;
          border-right: 1px solid #d7caba !important;
        }

        tr,
        td {
          /* border: 1px solid #d7caba; */
          /* border-bottom: 1px solid #d7caba; */
          height: 35px;
          text-align: center;
        }
      }
    }
  }
</style>
